<?include "global.tbh"
include "html_common.tbh"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?if NOT verifySession() then
	setsend("Brak dostepu")
	goto finish
end if?>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=utf-8"/>
  <title>Wizualizacja</title>
  <style type="text/css"/>
<?
  Dim x As Byte
  Dim s As String
  romfile.open("style.css")
  Do
     x=sock.txfree
     s=romfile.getdata(x)
     sock.setdata(s)
     sock.send
  Loop While Len(s)=x
?>
  </style>
  
  <script>
var domParts = new Array();
var queries = new Array();
var maxHeatingTemp=<?sock.setdata(getSensorValue("ogrMax"))?>, maxCwuTemp=<?sock.setdata(getSensorValue("cwuMax"))?>,minHeatingTemp=<?sock.setdata(getSensorValue("ogrMin"))?>, minCwuTemp=<?sock.setdata(getSensorValue("cwuMin"))?>;
function displayHeatingDialog()
{
	var svg = document.getElementById("svg");
	var txt = svg.getElementById("heatingTempSet").childNodes[0].nodeValue;
	txt = txt.substr(0,txt.length-2);
	var temperature=displayTemperaturePrompt(minHeatingTemp,maxHeatingTemp,txt);
	if (temperature!=null){
	var request=new XMLHttpRequest();
	request.open("GET","setValue.html?sensor=ogrSet&value="+temperature*10,false);
	request.send();
	}
	
};

function displayCwuDialog()
{
	var svg = document.getElementById("svg");
	var txt = svg.getElementById("cwuTempSet").childNodes[0].nodeValue;
	txt = txt.substr(0,txt.length-2);
	var temperature=displayTemperaturePrompt(minCwuTemp,maxCwuTemp,txt);
	if (temperature!=null){
	var request=new XMLHttpRequest();
	request.open("GET","setValue.html?sensor=cwuSet&value="+temperature*10,false);
	request.send();
	}
};
function displayTemperaturePrompt(min,max,text)
{
	var input, correct=false;
	var patt=new RegExp("^[0-9]+\.?[0-9]?$");
	do {
		input = prompt("Zadana temperatura:",text);
		if (input==null) return null;
		if (patt.test(input)){
			if (input<min ||input>max){
				alert("Temperatura musi być w zakresie od "+min+" do "+max);
			}
			else{correct=true;}
		}
		else
		{
			alert("Zły format liczby"+input);
		}
			
	}while(!correct);
	return input;
}
function update()
{	
	var request=new XMLHttpRequest();
	request.onreadystatechange=function()
	{
		if (request.readyState==4 /*&& xmlhttp.status==200*/)
		{
			var response=request.responseXML;
			var svg = document.getElementById("svg");
			svg.getElementById("heatingTemp").childNodes[0].nodeValue = response.getElementsByTagName("heatingTemp")[0].childNodes[0].nodeValue+"°C";
			svg.getElementById("CWUTemp").childNodes[0].nodeValue = response.getElementsByTagName("CWUTemp")[0].childNodes[0].nodeValue+"°C";
			svg.getElementById("OPin").childNodes[0].nodeValue = response.getElementsByTagName("OPin")[0].childNodes[0].nodeValue+"°C";
			svg.getElementById("OPout").childNodes[0].nodeValue = response.getElementsByTagName("OPout")[0].childNodes[0].nodeValue+"°C";
			svg.getElementById("GlikolIn").childNodes[0].nodeValue = response.getElementsByTagName("GlikolIn")[0].childNodes[0].nodeValue+"°C";
			svg.getElementById("GlikolOut").childNodes[0].nodeValue = response.getElementsByTagName("GlikolOut")[0].childNodes[0].nodeValue+"°C";
			svg.getElementById("compressor").childNodes[0].nodeValue = response.getElementsByTagName("compressor")[0].childNodes[0].nodeValue+"°C";
			svg.getElementById("heatingTempSet").childNodes[0].nodeValue = response.getElementsByTagName("heatingTempSet")[0].childNodes[0].nodeValue+"°C";
			svg.getElementById("cwuTempSet").childNodes[0].nodeValue = response.getElementsByTagName("cwuTempSet")[0].childNodes[0].nodeValue+"°C";
		}
	};
	request.open("GET","visualisationData.html",true);
	request.overrideMimeType('text/xml');
	request.send();
}

function getSyncRequest (query,domElement)
{
	var request=new XMLHttpRequest();
	request.onreadystatechange=function()
	{
		if (request.readyState==4 /*&& xmlhttp.status==200*/)
		{
			domElement.childNodes[0].nodeValue =request.responseText;
		}
	};
	request.open("GET",query,false);
	request.send();
}

function init(){
setInterval(function(){update();},3000);
}

</script>
</head>
<body onload="init()">
<div class="wrapper">
<div class="top-sh1"></div>
<div class="banner-area">
<div class="banner-sh" style="background:url(left-sh-1.png) no-repeat right top"></div>
<div class="banner-bg1">
<div class="banner-txt">
<div class="banner-txt-left">
Panel zarządzania
</div>
</div>
<div class="nav-area">
<ul class="navigation">
  <li><a href="wizualizacja.html?sid=<?setsend(getSessionID())?>">Wizualizacja</a></li>
  <li><a href="nastawy.html?sid=<?setsend(getSessionID())?>">Nastawy temperatur</a></li>
  <li><a href="settings.html?sid=<?setsend(getSessionID())?>">Ustawienia</a></li>
  <li><a href="#">Pomoc</a></li>
</ul>
</div>
<div class="nav-sh"></div>
</div>
<div class="banner-sh" style="background:url(right-sh-1.png) no-repeat left top"></div>
</div>
<div class="warpper-mid">
<div class="mid-left">
<center>
<svg onload="animate(evt)" height="841" width="801" id="svg">
	
	<script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[
        var arrows = new Array();
        var speed = 60;
		var svgDocument;
		var arrowgroup;
		function arrow(translate,dir,dist){
		this.translate=translate;
		this.dir=dir;
		this.dist=dist;
		this.makeNode= function (){
				var svgns = "http://www.w3.org/2000/svg";
				var a=svgDocument.createElementNS(svgns,"polygon");
				a.setAttribute("transform",this.translate);
				a.setAttribute("dir",this.dir);
				a.setAttribute("dist",this.dist);
				return a;
		}
		}
		
		function start(s,n){
				a=arrows[n].makeNode();
				arrowgroup.appendChild(a);
				advance(s,n,a);
		}

        function animate(evt) {
            if ( window.svgDocument == null )
                svgDocument = evt.target.ownerDocument;
				arrowgroup = svgDocument.getElementById("arrows");
				arrows[0]=new arrow("translate(480.64,256.26)","left",383);
				arrows[1]=new arrow("translate(90.79,262.99)","down",283);
				arrows[2]=new arrow("translate(98.99,545.99)","right",240);
				arrows[3]=new arrow("translate(339.99,536.36)","up",229);
				arrows[4]=new arrow("translate(329.81,306.86)","left",187);
				arrows[5]=new arrow("translate(142.37,315.03)","down",178);
				arrows[6]=new arrow("translate(150.43,493.28)","right",137);
				arrows[7]=new arrow("translate(287.49,484.86)","up",127);
				arrows[8]=new arrow("translate(280.61,358.33)","left",86);
				arrows[9]=new arrow("translate(194.34,365.54)","down",77);
				arrows[10]=new arrow("translate(200.72,442.30)","right",12);
				arrows[11]=new arrow("translate(211.99,432.36)","up",32);
				arrows[12]=new arrow("translate(220.72,400.30)","right",42);
				arrows[13]=new arrow("translate(262.97,409.03)","down",59);
				arrows[14]=new arrow("translate(252.81,467.86)","left",84);
				arrows[15]=new arrow("translate(167.99,456.36)","up",122);
				arrows[16]=new arrow("translate(176.72,334.30)","right",138);
				arrows[17]=new arrow("translate(314.55,341.63)","down",177);
				arrows[18]=new arrow("translate(305.13,518.74)","left",188);
				arrows[19]=new arrow("translate(117.03,510.66)","up",228);
				arrows[20]=new arrow("translate(126.72,282.30)","right",239);
				arrows[21]=new arrow("translate(365.17,291.03)","down",53);
				arrows[22]=new arrow("translate(375.03,344.66)","right",115);
				arrows[23]=new arrow("translate(619.03,342.66)","right",80);
				arrows[24]=new arrow("translate(699.17,351.03)","down",480);
				arrows[25]=new arrow("translate(721.99,822.36)","up",555);
				arrows[26]=new arrow("translate(712.64,266.26)","left",90);
				
				
				start(0,0);
				start(79,1);
				start(18,3);
				start(64,5);
				start(84,8);
				start(32,16);
				start(179,18);
				start(225,20);
				start(200,24);
				start(182,25);
				
				
				
			
			

        }

        function advance(x,arrno,arrownode) {
			x=x+3 	
            if ( x > arrownode.getAttribute('dist') ){
			x  = 0;
			arrowgroup.removeChild(arrownode);
			
			arrno=(arrno+1)%27;
			arrownode=arrows[arrno].makeNode();
			arrowgroup.appendChild(arrownode);
			}
			var points;
			if (arrownode.getAttribute('dir')=='left')
				var points=(10-x)+",10 "+(0-x)+",5 "+(10-x)+",0";
			if (arrownode.getAttribute('dir')=='right')
				var points=(0+x)+",10 "+(10+x)+",5 "+(x)+",0";
			if (arrownode.getAttribute('dir')=='up')
				var points="10,"+(10-x)+" 5,"+(-x)+" 0,"+(10-x);
			if (arrownode.getAttribute('dir')=='down')
				var points="0,"+(0+x)+" 10,"+(0+x)+" 5,"+(10+x);
			arrownode.setAttributeNS(null, "points", points);
            setTimeout(function(){advance(x,arrno,arrownode);}, speed);
        }
    ]]></script>

 <defs>

  <linearGradient id="linearGradient3081" y2="654" gradientUnits="userSpaceOnUse" x2="704" gradientTransform="matrix(1.274936,0,0,1.274936,-191.29252,-41.35248)" y1="304" x1="699">

   <stop stop-color="#0FF" offset="0"/>

   <stop stop-color="#8080ff" offset="1"/>

  </linearGradient>

  <linearGradient id="linearGradient3089" y2="680" gradientUnits="userSpaceOnUse" x2="713" gradientTransform="matrix(1.274936,0,0,1.274936,-181.29252,-41.35248)" y1="243" x1="713">

   <stop stop-color="#8000ff" offset="0"/>

   <stop stop-color="#8080ff" offset="1"/>

  </linearGradient>

  <pattern id="pattern5549" width="20.6875" patternUnits="userSpaceOnUse" patternTransform="translate(199.65625,662.02277)" height="20.6875">

   <path stroke-linejoin="miter" d="m20.3,0.339-20,20" stroke="#000" stroke-linecap="butt" stroke-width="1px" fill="none"/>

  </pattern>

 </defs>

 <g>

  <rect height="6.36" width="401" y="259" x="92" fill="#F00"/>

  <rect transform="matrix(0,-1,1,0,0,0)" height="6.54" width="291" y="92" x="-551" fill="#ff0c00"/>

  <rect height="6.6" width="255" y="284" x="118" fill="#fff000"/>

  <rect height="6.71" width="204" y="310" x="144" fill="#ff3000"/>

  <rect height="6.82" width="153" y="335" x="169" fill="#ffc000"/>

  <rect height="6.97" width="102" y="360" x="195" fill="#ff6000"/>

  <rect height="7.15" width="57.7" y="402" x="214" fill="#ff9000"/>

  <rect height="6.97" width="102" y="470" x="170" fill="#ffa800"/>

  <rect height="6.82" width="153" y="496" x="144" fill="#ff4800"/>

  <rect height="6.71" width="204" y="521" x="118" fill="#ffd800"/>

  <rect height="241" width="6.02" y="285" x="119" fill="#ffe400"/>

  <rect height="191" width="6.18" y="310" x="144" fill="#ff3c00"/>

  <rect height="142" width="6.37" y="335" x="170" fill="#ffb400"/>

  <rect height="88.9" width="6.61" y="361" x="195" fill="#ff6c00"/>

  <rect height="7.3" width="26" y="443" x="195" fill="#ff7800"/>

  <rect height="48.1" width="6.87" y="402" x="214" fill="#ff8400"/>

  <rect height="74.5" width="6.69" y="402" x="265" fill="#ff9c00"/>

  <rect height="192" width="6.18" y="335" x="316" fill="#FC0"/>

  <rect height="141" width="6.37" y="361" x="290" fill="#ff5400"/>

  <rect height="6.6" width="256" y="547" x="92.1" fill="#ff1800"/>

  <rect height="241" width="6.02" y="312" x="342" fill="#ff2400"/>

  <path fill="#FF0" d="m367,284,0,67.7,0.0797,0,0,0.0797,126,0,0-6.02-120,0,0-61.8-6.02,0z"/>

  <rect height="120" width="126" stroke="#000" y="244" x="492" stroke-width="1.27" fill="none"/>

  <rect height="205" width="126" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="367" x="492" stroke-width="1.28" fill="none"/>

  <path fill="url(#linearGradient3081)" d="m619,344,0,6.37,82.8,0,0,485,6.41,0,0-485,0-6.37,0-0.0398c-30.8,0.0574-62.7,0.0411-89.2,0.0398z"/>

  <path fill="url(#linearGradient3089)" d="m618,268,0.177,6.37,106,0,0,562,6.41,0,0-568h-113z"/>

  <path d="m705,695c0,2.69-4.89,4.88-10.9,4.88s-10.9-2.17-10.9-4.86l10.9-0.017z" transform="matrix(1.3369828,0,0,1.3032679,-212.0235,-70.068677)" fill="#8080ff"/>

  <rect transform="scale(-1,-1)" height="456" width="715" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="-613" x="-754" stroke-width="5" fill="none"/>

  <path fill="none" transform="matrix(1.4475252,-0.42993289,2.5071873,0.24822187,488.22556,153.72259)" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" stroke-width="4.17068043" d="M119-24.4,50.2,94.8-18.6-24.4-87.4-144l138-0.00001h138z"/>

  <rect height="18.6" width="40.4" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="335" x="569" stroke-width="1" fill="#b3b3b3"/>

  <rect height="6.36" width="13.4" stroke="#000" stroke-dasharray="none" stroke-miterlimit="4" y="339" x="590" stroke-width="1" fill="#00F"/>

  <rect id="setHeating" height="85" width="130" y="163" x="94.8" fill="#CCC" onclick="displayHeatingDialog()"/>

  <text style="letter-spacing:0px;word-spacing:0px;" font-weight="bold" xml:space="preserve" font-size="16px" font-stretch="normal" line-height="125%" font-variant="normal" y="178.9848" x="119.61044" font-family="Arial" font-style="normal" fill="#000000"><tspan style="text-anchor:start;text-align:start;" y="178.9848" x="119.61044">Temperatura</tspan><tspan style="text-anchor:start;text-align:start;" y="198.9848" x="119.61044">   w domu</tspan></text>

  <text id="heatingTemp" style="letter-spacing:0px;word-spacing:0px;" font-weight="bold" xml:space="preserve" font-size="20px" font-stretch="normal" line-height="125%" font-variant="normal" y="219.36218" x="132.1124" font-family="Arial" font-style="normal" fill="#000000"><?sock.setdata(getSensorValue("ogrCur"))?>°C</text>

  <text style="letter-spacing:0px;text-anchor:start;word-spacing:0px;text-align:start;" font-weight="bold" xml:space="preserve" font-size="16px" font-stretch="normal" line-height="125%" font-variant="normal" y="186.36218" x="419.91513" font-family="Arial" font-style="normal" fill="#000000"><tspan style="text-anchor:start;text-align:start;" y="186.36218" x="419.91513">Ogrzewanie</tspan><tspan style="text-anchor:start;text-align:start;" y="206.36218" x="419.91513">podłogowe</tspan></text>

  <text id="OPin" style="letter-spacing:0px;word-spacing:0px;" font-weight="bold" xml:space="preserve" font-size="20px" font-stretch="normal" line-height="125%" font-variant="normal" y="242.5174" x="419.72177" font-family="Arial" font-style="normal" fill="#000000"><?sock.setdata(getSensorValue("ogPoWe"))?>°C</text>

  <text id="OPout" style="letter-spacing:0px;word-spacing:0px;" font-weight="bold" xml:space="preserve" font-size="20px" font-stretch="normal" line-height="125%" font-variant="normal" y="332.36218" x="420.1124" font-family="Arial" font-style="normal" fill="#000000"><?sock.setdata(getSensorValue("ogPoWy"))?>°C</text>

  <text style="letter-spacing:0px;word-spacing:0px;" font-weight="bold" xml:space="preserve" font-size="20px" font-stretch="normal" line-height="125%" font-variant="normal" y="282.36218" x="519.03229" font-family="Arial" font-style="normal" fill="#000000"><tspan font-weight="bold" font-size="16px" font-style="normal" font-stretch="normal" font-variant="normal" y="282.36218" x="519.03229" font-family="Arial">Sprężarka</tspan></text>

  <text id="compressor" style="letter-spacing:0px;word-spacing:0px;" font-weight="bold" xml:space="preserve" font-size="20px" font-stretch="normal" line-height="125%" font-variant="normal" y="322.36218" x="518.85846" font-family="Arial" font-style="normal" fill="#000000"><?sock.setdata(getSensorValue("kompre"))?>°C</text>

  <rect id="setCWU" height="85" width="109" y="432" x="501" fill="#CCC" onclick="displayCwuDialog()"/>

  <text style="letter-spacing:0px;word-spacing:0px;" font-weight="bold" xml:space="preserve" font-size="20px" font-stretch="normal" line-height="125%" font-variant="normal" y="452.36218" x="520" font-family="Arial" font-style="normal" fill="#000000"><tspan font-weight="bold" font-size="16px" font-style="normal" font-stretch="normal" font-variant="normal" y="452.36218" x="520" font-family="Arial">CWU</tspan></text>

  <text id="CWUTemp" style="letter-spacing:0px;word-spacing:0px;" font-weight="bold" xml:space="preserve" font-size="20px" font-stretch="normal" line-height="125%" font-variant="normal" y="475.36218" x="520" font-family="Arial" font-style="normal" fill="#000000"><?sock.setdata(getSensorValue("cwuCur"))?>°C</text>

  <text style="letter-spacing:0px;word-spacing:0px;" font-weight="bold" xml:space="preserve" font-size="16px" font-stretch="normal" line-height="125%" font-variant="normal" y="203.83405" x="639.84479" font-family="Arial" font-style="normal" fill="#000000"><tspan font-weight="bold" font-style="normal" font-stretch="normal" font-variant="normal" y="203.83405" x="639.84479" font-family="Arial">Glikol</tspan></text>

  <text id="GlikolIn" style="letter-spacing:0px;word-spacing:0px;" font-weight="bold" xml:space="preserve" font-size="20px" font-stretch="normal" line-height="125%" font-variant="normal" y="242.36218" x="639.02838" font-family="Arial" font-style="normal" fill="#000000"><?sock.setdata(getSensorValue("glikWe"))?>°C</text>

  <text id="GlikolOut" style="letter-spacing:0px;word-spacing:0px;" font-weight="bold" xml:space="preserve" font-size="20px" font-stretch="normal" line-height="125%" font-variant="normal" y="332.36218" x="639.72174" font-family="Arial" font-style="normal" fill="#000000"><?sock.setdata(getSensorValue("glikWy"))?>°C</text>

  <text id="heatingTempSet" style="letter-spacing:0px;word-spacing:0px;" font-weight="normal" xml:space="preserve" font-size="14px" font-style="normal" y="239.59064" x="157.20029" font-family="Sans" line-height="125%" fill="#000000"><?sock.setdata(getSensorValue("ogrSet"))?>°C</text>

  <text style="letter-spacing:0px;word-spacing:0px;" font-weight="normal" xml:space="preserve" font-size="14px" font-style="normal" y="239.59747" x="102.33017" font-family="Sans" line-height="125%" fill="#000000"><tspan x="102.33017" y="239.59747">Zadana:</tspan></text>

  <text style="letter-spacing:0px;word-spacing:0px;" font-weight="normal" xml:space="preserve" font-size="14px" font-style="normal" y="504.59747" x="512.33014" font-family="Sans" line-height="125%" fill="#000000"><tspan x="512.33014" y="504.59747">Zadana:</tspan></text>

  <text  id="cwuTempSet" style="letter-spacing:0px;word-spacing:0px;" font-weight="normal" xml:space="preserve" font-size="14px" font-style="normal" y="504.5838" x="567.02252" font-family="Sans" line-height="125%" fill="#000000"><?sock.setdata(getSensorValue("cwuSet"))?>°C</text>

  <path fill="url(#pattern5549)" d="m0.7,674,0,15.3,800,0,0-15.3-800,0z"/>

  <path stroke-linejoin="miter" d="m-1.35,672,800,0" stroke="#000" stroke-linecap="butt" stroke-width="2.07909632px" fill="none"/>


 </g>
	
	   <g
       id="arrows">
	   
    </g>
    </svg>
</center>
</div>

<div class="warpper-bot">
<div class="footer-right">


<p class="footer-txt">jakas stopka</p>
</div>
</div>
</div>
</div>
</body>
<?finish:?>
</html>
